<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>{$proTitle}</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/dist/gmu.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
    <!-- <script src="http://sdk.talkingdata.com/app/h5/v1?appid=DE13C350F41F5DE78FEC51DB5DE730D1&vn=v2&vc=v2"></script> -->
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/dist/gmu.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <style>
        body{
            background-color:#F2F2F2;
        }
        @font-face {
            font-family: 'iconfont';
            src: url('//at.alicdn.com/t/font_1461124297_2368376.eot'); /* IE9*/
            src: url('//at.alicdn.com/t/font_1461124297_2368376.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('//at.alicdn.com/t/font_1461124297_2368376.woff') format('woff'), /* chrome、firefox */
            url('//at.alicdn.com/t/font_1461124297_2368376.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('//at.alicdn.com/t/font_1461124297_2368376.svg#iconfont') format('svg'); /* iOS 4.1- */
        }
        .container{
            max-width:640px;
            margin:0 auto;
            font-size:14px;
            text-align:center;
        }
        .container-top{
            height:52px;
            line-height:40px;
        }
        .container-top>img{
            max-height:100%;
            margin-right:10px;
        }
        .container-top>span{
            line-height: 52px;
            vertical-align: top;
        }
        .blue{
            background-color:#4AA6FD;
            color:white;
        }
        .ui-slider-dots{
            left:50%;
        }
        .ui-slider-item{
            height:170px;
            overflow:hidden;
            text-align: center;
            font-size:0;
        }
        .ui-slider-item>img{
            transform:translate(0,-50%);
            -webkit-transform:translate(0,-50%);
            position:relative;
            top:50%;
            max-width:100%;
        }
        .container-main .content{
            padding:10px 20px;
            text-align: left;
        }
        .menuJson{
            margin-top:10px;
            background-color: white;
        }
        .menuJson ul{
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: center;
            -webkit-box-pack: justify;
            overflow: hidden;
        }
        .menuJson li a{
            display:block;
            height:86px;
            text-align:center;
            font-size:0;
            overflow: hidden;
        }
        .menuJson li a img{
            max-height: 100%;
            max-width: 100%;
        }
        .pro-list{
            background-color:white;
        }
        .verification{
            background-color:white;
            padding:10px;
        }
        .verification .inputDiv{
            border:1px solid #ccc;
            border-radius:4px;
            overflow:hidden;
            height:30px;
            line-height:30px;
        }
        .verification .inputDiv input{
            text-align: left;
            padding:0 5px;
            box-sizing:border-box;
            width: calc(100% - 68px);
            width: -webkit-calc(100% - 68px);
        }
        .verification .inputDiv a{
            display:inline-block;
            padding:0 20px;
        }
        .verification >span{
            color:#FE3636;
        }
        .follow{
            height:49px;
            line-height:49px;
            font-size:17px;
            display:block;
        }
        .follow i{
            font-family:'iconfont';
            vertical-align: top;
            position: relative;
            margin:0 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="container-top blue">
            <img src="{$proLogo}">
            <span>{$proTitle}</span>
        </div>
        <div class="container-main">
            <ul class="pro-list" id="detail-slider" >
                <volist name="proImgs" id="picItem">
                    <li l="true">
                        <img src="{$picItem.url}">
                    </li>
                </volist>
            </ul>
            <script type="text/javascript">
                var loop = $("#detail-slider li").size() > 2;
                $("#detail-slider").slider({
                    loop: loop,
                    imgZoom: false,
                    arrow: false,
                    autoPlay: false,
                    slide: function(e, to, from) {

                    }
                });
                if ($("#detail-slider li").size() > 1) {
                    $(".ui-slider-dots").css("marginLeft", $(".ui-slider-dots").width() / 2 * -1);
                } else {
                    $(".ui-slider-dots").hide();
                }
            </script>
            <div class="verification">
                <div class="inputDiv">
                    <input type="text" id="securityCode" placeholder="请输入防伪码">
                    <a class="blue" id="verification">验证</a>
                </div>
            </div>
            <div class="content blue">
                {$proContent}
            </div>
            <div class=menuJson>
                <ul>
                    <volist name="json.menu" id="menu">
                        <li>
                            <a href="{$menu.link}">
                                <img src="{$menu.url}" />
                            </a>
                        </li>
                    </volist>
                </ul>
            </div>
            <a class="follow blue" href="{$followUrl}">
                <i style="font-size:33px;top:-2px">&#xe600;</i>
                <span style="vertical-align: top">关注微信</span>
                <i style="font-size: 20px;top:1px">&#xe601;</i>
            </a>
        </div>
    </div>
    <script>
        var baseUrl = '{$Think.config.SERVER_HOST}';
        var sercuity = {
            init:function(){
                this._initEvent();
            },
            _initEvent:function(){
                var me= this;
                $("#verification").click(function(){
                    var securityCode = $("#securityCode").val();
                    if(!securityCode){
                        $.util.alert("请输入验证码");
                        return;
                    }
                    var securityId = '{$id}';
                    $.util.pageLoading.show();
                    $.req.get("call.json?customerId={$customerId}&module=security&method=verification",{
                        params:{
                            "id":securityId,
                            "code":securityCode
                        }
                    },function(data){
                        if(data.code){
                            $.util.alert(data.msg);
                        }else{
                            $(".verification").html(data.securityInfo);
                        }
                        $.util.pageLoading.hide();
                    });
                });
            }
        }
        sercuity.init();
    </script>
    <script>
        wx_share.init({
            "title":"{$shareTitle}",
            "desc":'{$shareDescrip}',
            "link":window.location.href,
            "imgUrl": $.trim('{$shareImg}'),
            "pkg":{
                "appId": '{$pkg.appId}',
                "timestamp": '{$pkg.timestamp}',
                "nonceStr": '{$pkg.nonceStr}',
                "signature": '{$pkg.signature}'
            },
            success:function(config,shareType){

            }
        });
    </script>
</body>
</html>